<script setup>
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { ElIcon } from 'element-plus';
import { Plus } from '@element-plus/icons-vue';
import {pageTableData} from "@/api/empList";
import {addEmployee} from "@/api/empList";
import {updateEmployee} from "@/api/empList";

//----------- 数据定义 ---------------------------
const dialogFormVisible = ref(false) // 新增对话框
const editDialogVisible = ref(false) // 编辑对话框
const labelWidth = ref('80px')
const formTitle = ref(null)
const employees = ref([])
const currentPage = ref(1)
const pageSize = ref(10)
const employeeName1 = ref(null)
const gender1 = ref(null)
const phone1 = ref(null)
const total = ref(0)
const imageUrl = ref(null)

const employee = ref({
  id: null,
  EmployeeName: null,
  gender: null,
  phone: null,
  password: null,
  image: null
})
const formRef = ref(null) // 用于表单验证
const upSelected = ref({...employee.value})

//----------- 表单验证规则 ---------------------------
const rules = {

}

//----------- 方法定义 ---------------------------
const clearEmployee = () => {
  employee.value = {
    id: null,
    EmployeeName: null,
    gender: null,
    phone: null,
    password: null,
    image: null
  }
}

const getTableData = () => {
  const query = {
    page: currentPage.value,
    pageSize: pageSize.value,
    employeeName: employeeName1.value,
    phone: phone1.value,
    gender: gender1.value
  }
  pageTableData(query).then(res => {
    employees.value = res.data.records
    total.value = res.data.total
  })
}

const handleCurrentChange = (val) => {
  currentPage.value = val
  getTableData()
}

const handleSizeChange = (val) => {
  pageSize.value = val
  getTableData()
}

const handleAdd = () => {
  formTitle.value = '新增员工'
  dialogFormVisible.value = true
}


const submitForm = () => {
  formRef.value.validate((valid) => {
    if (valid) {
      addEmployee(employee.value)
          .then(res => {
            ElMessage.success('添加成功')
            dialogFormVisible.value = false
            clearEmployee()
            getTableData()
          })
          .catch(error => {
            ElMessage.error('添加失败：' + error.message)
          })
    }
  })
}
const updatedEmployee = () => {
  updateEmployee(upSelected.value).then(res => {
    ElMessage.success('修改成功')
    editDialogVisible.value = false
    getTableData()
  })
}

const handleAvatarSuccess = (response, uploadFile) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw)
  upSelected.value.image = response.data.url
}

//----------- 选项数据 ---------------------------

const genderOptions = [
  { value: '男', label: '男' },
  { value: '女', label: '女' },
]
const showEdit = (row) => {
  upSelected.value = JSON.parse(JSON.stringify(row))
  imageUrl.value = row.image
  editDialogVisible.value = true

}

// 初始化加载数据
getTableData()
</script>

<template>
  <div class="container">
    <!-- 顶部标题 -->
    <div id="title">员工管理</div><br>

    <!-- 搜索表单 -->
    <el-form :inline="true" class="search-form">
      <el-form-item label="员工姓名：">
        <el-input
            v-model="employeeName1"
            placeholder="请输入员工名称"
            clearable
            @keyup.enter="getTableData"
        />
      </el-form-item>

      <el-form-item label="性别：" style="width: 300px">
        <el-select
            v-model="gender1"
            placeholder="请选择性别"
            clearable
        >
          <el-option
              v-for="item in genderOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="getTableData">查询</el-button>
        <el-button @click="employeeName1 = null; gender1 = null">清空</el-button>
      </el-form-item>
    </el-form>

    <el-button type="success" @click="handleAdd">+ 新增员工</el-button>

    <!-- 商品表格 -->
    <el-table :data="employees" border style="width: 100%" class="mt-20">
      <el-table-column prop="image" label="员工头像" width="160" align="center">
        <template #default="{row}">
          <el-image :src="row.image" style="width: 100px; height: 100px" fit="contain" />
        </template>
      </el-table-column>
      <el-table-column prop="employeeName" label="员工姓名" width="150" align="center"/>
      <el-table-column prop="gender" label="性别" width="100" align="center"/>
      <el-table-column prop="phone" label="电话" width="200" align="center"/>
      <el-table-column prop="createTime" label="创建时间" width="300" align="center"/>
      <el-table-column prop="updateTime" label="更新时间" width="300" align="center" />
      <el-table-column label="操作" width="180" fixed="right" align="center">
        <template #default="{row}">
          <el-button @click="showEdit(row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :background = true
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />

    <!-- 新增商品对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="formTitle" width="600px">
      <el-form ref="formRef" :model="employee" :rules="rules" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="employee.employeeName" />
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="employee.password" />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="employee.gender" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="employee.phone"  />
        </el-form-item>
        <el-form-item label="员工头像">
          <el-upload
              action="/api/file/upload"
              :show-file-list="false"
              :on-success="(res) => employee.image = res.data.url"
          >
            <el-button type="primary">点击上传</el-button>
            <template #tip>
              <div class="el-upload__tip">
                {{ employee.image || '未上传图片' }}
              </div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="dialogFormVisible = false; clearEmployee()">取消</el-button>
        <el-button type="primary" @click="submitForm">保存</el-button>
      </template>
    </el-dialog>

    <!-- 编辑商品对话框 -->
    <el-dialog v-model="editDialogVisible" title="编辑员工" width="600px">
      <el-form :model="upSelected" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="upSelected.employeeName" />
        </el-form-item>
        <el-form-item label="性别">
          <el-input v-model="upSelected.gender" />
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="upSelected.phone" />
        </el-form-item>
        <el-form-item label="员工头像">
          <el-upload
              class="avatar-uploader"
              action="/api/file/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updatedEmployee">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.page-container {
  padding: 24px;
  background-color: #fff;
  min-height: calc(100vh - 64px);
  box-sizing: border-box;
}

#title {
  margin-bottom: 16px;
  font-size: 20px;
  font-weight: 600;
  color: #333;
  border-left: 4px solid #409eff;
  padding-left: 8px;
}

.search-form {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.search-form .el-form-item {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}

.search-form .el-input,
.search-form .el-select {
  width: 200px;
}

.mt-20 {
  margin-top: 20px;
}

.el-table {
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  overflow: hidden;

  th, td {
    padding: 12px 0;
  }

  tr:hover {
    background-color: #f8f9fd;
  }

  /* 空状态优化 */
  .el-table__empty-text {
    color: #999;
  }
}

.avatar-uploader {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 178px;
  height: 178px;

  &:hover {
    border-color: var(--el-color-primary);
  }
}

.avatar {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
  line-height: 178px;
}

.el-pagination {
  margin-top: 20px;
}

.el-button {
  border-radius: 4px;
  transition: all 0.3s;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}

.el-button--success {
  &:hover {
    background-color: #67c23a;
    border-color: #67c23a;
  }
}
</style>